iT邦幫忙

2024 iThome 鐵人賽

DAY 21
0
自我挑戰組

JavaScript DOM 操作系列 第 21

DAY 21: 創建動態導航選單

  • 分享至 

  • xImage
  •  

今天我學習了如何用 JavaScript 來動態生成一個導航選單。雖然剛開始時覺得這個概念有點難,但隨著嘗試多次,我發現其實只要掌握了迭代和 DOM 操作的基礎邏輯,就能輕鬆應對。現在來分享一下我今天的學習成果。

  1. 迭代生成 li 元素並插入到 ul 中的範例:

https://ithelp.ithome.com.tw/upload/images/20241005/20169384XWG0z63G8y.png

在這段程式碼中,我們先定義了一個包含選單項目的陣列,接著利用 forEach 方法迭代每一個項目,並為每個項目創建對應的 li 元素。最後將這些元素加入到 ul 中,再插入到網頁上。這樣我們就能動態生成一個導航選單。

  1. 範例碼執行結果:

https://ithelp.ithome.com.tw/upload/images/20241005/201693846hoi4Cp3bZ.png

透過這段程式碼,我們成功地生成了包含四個項目的導航列。

  1. 額外補充:為選單項目添加連結
    我們可以進一步改進程式,為每個 li 元素添加連結,讓選單項目不僅僅是文字。

https://ithelp.ithome.com.tw/upload/images/20241005/20169384AVqoo1pqoG.png

這樣的改進讓我們的選單變得更加實用,也能更加符合現代網頁設計的需求。


上一篇
DAY 20: 建立簡單的計數器應用
下一篇
DAY 22: 操作多媒體元素
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言